function $(idName){
	return document.getElementById(idName);
}
//生成随机数
function rand(min,max){
	return parseInt(Math.random()*(max-min))+min;
}

// 开始界面
var gameStart = $("start");
var startBlock = $("startBlock");
//logo
var logoDiv = $("birdLogo");
var logoBird = $("logo_bird");
// 传送带
var slider = $("slider");
var sliderImg = slider.getElementsByTagName("img");

// 开始游戏的按钮
var statrBtn = $("startBtn");//开始游戏的按钮
var startMusic = $("gameMusic");//游戏背景音乐
var overMusic = $("gameOverMusic");//游戏结束的背景音乐
var bird = $("bird");//游戏中的小鸟
var game = $("game");//游戏主界面
var pipe = $("pipe");//管道
var createPipeTimer;//创建管道的定时器
var pipeUl = $("pipeUl");
var bulletMusic = $("bullet");//点击时的音效
var scoreDiv = $("score");//分数div
var score = 0;

// 游戏结束
var gameoverDiv = $("gameover");
var myScore = $("myScore");
var best = $("best");
var okBtn = $("ok");


var sliderTimer = setInterval(slide,30);
function slide(){
	// 传送带移动
	sliderImg[0].style.left = sliderImg[0].offsetLeft-1+"px";
	sliderImg[1].style.left = sliderImg[1].offsetLeft- +"px";
	if (sliderImg[0].offsetLeft<=-343) {
		sliderImg[0].style.left="343px";
	};
	if (sliderImg[1].offsetLeft<=-343) {
		sliderImg[1].style.left="343px";
	};
}

var startTimer = setInterval(start,30);
var move = 1;//移动速度
var logoBirdArr = ["img/bird0.png","img/bird1.png"];
var index = 1;
function start(){
	//让logo上下移动
	if (logoDiv.offsetTop>=150) {
		move = -1;
	};
	if (logoDiv.offsetTop<=120) {
		move = 1;
	};
	
	logoDiv.style.top = logoDiv.offsetTop + move+"px";

	// 小鸟飞 翅膀动
	logoBird.src = logoBirdArr[index];
	index++;
	if (index==logoBirdArr.length) {
		index = 0;
	};
}

// 游戏开始
startBtn.onclick = function(){
	clearInterval(startTimer);//停止开始界面的定时器
	startBlock.style.display = "none";//开始界面隐藏掉
	game.style.display = "block";
	startGame();//开始游戏
}
/*******************开始游戏******************/
function startGame(){
	gameMusic.play();//播放背景音乐
	// 过2秒小鸟开始下坠
	setTimeout(function(){
		bird.downTimer = setInterval(down,100);
	},2000);
	createPipe();//创建管道
	freshScore();//显示分数
	var collisionTimer = setInterval(collision,30);
	// collision();//检测碰撞
}
/********************小鸟的上下移动************************/
var speed = 0;
var maxSpeed = 8;
function down(){
	bird.src = "img/down_bird0.png";
	speed+=0.5;
	if (speed>=maxSpeed) {
		speed = maxSpeed;
	};
	bird.style.top = bird.offsetTop+speed+"px";
	if (bird.offsetTop+bird.offsetHeight>=422) {
		// console.log("gameover+down");
		// 游戏结束
		gameOver();
	}
}
function up(){
	speed-=0.8;
	bird.style.top = bird.offsetTop-speed+"px";
	bird.src = "img/up_bird1.png";
	if (speed<=0) {
		clearInterval(bird.upTimer);
		speed=0;
		bird.downTimer = setInterval(down,100);
	};
	if (bird.offsetTop<=0) {
		// console.log("gameover+up");
		//游戏结束
		gameOver();
	}
	
}

// 在地图上点击以下 控制小鸟向上走
game.onclick = function(){
	bulletMusic.play();
	clearInterval( bird.downTimer );//停止下坠
	clearInterval( bird.upTimer );
	speed = 8;
	bird.upTimer = setInterval(up,30);
}


// 创建管道
//创建管道
function createPipe(){
	createPipeTimer = setInterval(function(){

		console.log("createPipe")
		var left = game.offsetWidth;//从地图的最右边产生

		var li = document.createElement("li");
		li.className = "pipe";
		li.style.left = left+"px";

		// 上方的管道
		var top_div = document.createElement("div");
		top_div.className = "top_pipe";
		var top_div_w = document.createElement("div");
		top_div_w.className = "top_pipe_cap";
		var topHeight = rand(52,250);
		top_div_w.style.height = topHeight + "px";
		top_div.appendChild(top_div_w);

		// 下方的管道
		var bottom_div = document.createElement("div");
		bottom_div.className = "bottom_pipe";
		var bottom_div_w = document.createElement("div");
		bottom_div_w.className = "bottom_pipe_cap";
		bottom_div_w.style.height = 300-topHeight + "px";
		bottom_div.appendChild(bottom_div_w);

		li.appendChild(top_div);
		li.appendChild(bottom_div);
		pipeUl.appendChild(li);
	

		var addScore = true;
		/***************难点******************/
		/*
			给每一个li添加一个定时器 负责本li的移动

		*/
		li.leftTimer = setInterval(function(){
			
			if(li.offsetLeft < -li.offsetWidth){
				// 清空定时器
				clearInterval(li.leftTimer);
				// 从UL上移除li
				pipeUl.removeChild(li);
			}	
			// 加分 一根水管 只能加一分 使用addScore进行判断
			if (addScore&&li.offsetLeft<=5) {
				addScore = false;
				score++;
				freshScore();
			};
			li.style.left = li.offsetLeft-2 +"px"
		},30)
	},3000)
}

/***************检测碰撞***********/

function collision(){
	// 获取所有的li
	var pipeUl_lis_arr = document.getElementsByTagName("li");
	// 遍历li把li中的上管道 下管道 与鸟 进行碰撞检测
	for (var i = 0; i < pipeUl_lis_arr.length; i++) {
		
		if ( crash(bird,pipeUl_lis_arr[i].firstChild)||crash(bird,pipeUl_lis_arr[i].lastChild) ) {
			console.log("gameover+碰撞啦");
			gameOver();
		};
	}
}

function crash(div1,div2){
	var l1 = div1.offsetLeft;
	var w1 = div1.offsetWidth;
	var t1 = div1.offsetTop;
	var h1 = div1.offsetHeight;
	// 注意 此处应该获取div的父节点li的offsetLeft
	var l2 = div2.parentNode.offsetLeft;
	var w2 = div2.offsetWidth;
	var t2 = div2.offsetTop;
	var h2 = div2.offsetHeight;
	console.log(l1,w1,t1,h1,l2,w2,t2,h2,div2);
	if (l1+w1<=l2||l1>=l2+w2||t1+h1<=t2||t1>=t2+h2) {
		
		return false;
	}else{
		
		return true;
	}

}

function freshScore(){
	//显示分数的div
	scoreDiv.innerHTML="";
	// 把分数 number类型-->string类型
	var scoreStr = score.toString();
	// 把每一个数字转换成对应的图片
	for (var i = 0; i < scoreStr.length; i++) {

		 scoreDiv.innerHTML += "<img src='img/"+ scoreStr[i]+".jpg'/>";
		 console.log(scoreDiv.innerHTML);
	};
}


function gameOver(){
	//背景音乐停止
	startMusic.pause();
	overMusic.play();
	clearAllTimer();//清楚所有的定时器
	// game.style.display = "none";
	gameoverDiv.style.display = "block";
	gameover.style.zIndex = "200";
	savaScore();
}

function savaScore(){
	// 上一次的最高分 
	// 第一次获取 最高分 获取到是null
	var preScore = window.localStorage.getItem("flappy1");
	console.log(preScore);

	myScore.innerHTML = score;
	if(preScore<score){
		window.localStorage.setItem("flappy1",score);
		best.innerHTML = score;
	}else{
		best.innerHTML = preScore;
	}
}
// 暴力清除
function clearAllTimer(){
	for (var i = 0; i < 1000; i++) {
		clearInterval(i);
	};
}

okBtn.onclick = function(){
	//刷新页面
	// window.location.href = 
	// window.location.reload();
	window.location.reload();
}














